<template>
  <div>
    <!-- 顶部区域 -->
    <div style="margin-bottom: 20px;">
      <span>发送者用户名：</span>
      <el-input v-model="params.sendUserName" placeholder="请输入发送者用户名" style="width: 200px;"></el-input>
      <el-button type="primary" style="margin-left: 10px;" @click="fetchMessageList">查询</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="Id" width="50"></el-table-column>
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="content" label="内容" width="180"></el-table-column>
      <el-table-column prop="sendUserName" label="发送人" width="80"></el-table-column>
      <el-table-column prop="receives" label="接收人" width="180"></el-table-column>
      <el-table-column prop="readCount" label="已读数" width="80"></el-table-column>
      <el-table-column prop="receiveUserCount" label="接收人数" width="80"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>
    </el-table>

    <!-- 底部区域 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageIndex"
      @size-change="fetchMessageList"
      @current-change="fetchMessageList">
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { MessagelistPageResponse } from '@/api/Messagelist'

// 定义请求参数
const params = ref({
  sendUserName: null as string | null,
  pageIndex: 1,
  pageSize: 10
})

// 表格数据与分页
const tableData = ref<MessagelistResponseType[]>([])
const total = ref<number>(0)

// 获取消息列表
const fetchMessageList = async () => {
  const res = await MessagelistPageResponse(params.value)
  if (res.code === 1) {
    tableData.value = res.response?.list ?? []
    total.value = res.response?.total ?? 0
  }
}

// 页面加载时自动获取数据
onMounted(() => {
  fetchMessageList()
})
</script>